<template>
   <el-scrollbar class="el_scrollbar">
      <div class="aside_title">
         <span>学院专业招生</span>
      </div>

      <el-menu
         active-text-color="#ffd04b"
         background-color="transparent"
         class="el-menu-vertical-demo"
         default-active="/heatMap"
         text-color="#acaeb1"
         :router="true"
         style="border: none"
      >
         <el-sub-menu index="1">
            <template #title>
               <el-icon><CreditCard /></el-icon>
               <span class="sub_menu_title">系统管理</span>
            </template>
            <el-menu-item
               index="/userManagement"
               v-show="
                  currentPagePermissionStatusByCurrentUser.userManagementShow
               "
               ><el-icon><User /></el-icon>用户管理</el-menu-item
            >
            <el-menu-item
               index="/roleManagement"
               v-show="
                  currentPagePermissionStatusByCurrentUser.roleManagementShow
               "
               ><el-icon><Orange /></el-icon>角色管理</el-menu-item
            >
            <el-menu-item
               index="/permissionManagement"
               v-show="
                  currentPagePermissionStatusByCurrentUser.permissionManagementShow
               "
               ><el-icon><Paperclip /></el-icon>权限管理</el-menu-item
            >
            <el-menu-item
               index="/operationLog"
               v-show="
                  currentPagePermissionStatusByCurrentUser.operationLogShow
               "
               ><el-icon><MessageBox /></el-icon>操作日志</el-menu-item
            >
         </el-sub-menu>
         <el-menu-item
            index="/studentMap"
            v-show="currentPagePermissionStatusByCurrentUser.originMapShow"
            ><el-icon><Position /></el-icon>生源地图</el-menu-item
         >

         <el-menu-item
            index="/studentData"
            v-show="
               currentPagePermissionStatusByCurrentUser.studentDataInfoShow
            "
            ><el-icon><OfficeBuilding /></el-icon>学生数据信息</el-menu-item
         >

         <el-menu-item
            index="/collegeEnrollment"
            v-show="
               currentPagePermissionStatusByCurrentUser.collegeEnrollInfoShow
            "
            ><el-icon><Sunny /></el-icon>学院招生信息</el-menu-item
         >

         <el-menu-item
            index="/enrollmentProvince"
            v-show="
               currentPagePermissionStatusByCurrentUser.enrollProvinceInfoShow
            "
            ><el-icon><Tickets /></el-icon>招生省份信息</el-menu-item
         >
      </el-menu>

      <router-link to="/aboutUs">
         <el-link
            style="
               position: absolute;
               bottom: 14px;
               right: 20px;
               color: #5a9cf8;
               font-size: 13px;
            "
            >关于我们</el-link
         >
      </router-link>
   </el-scrollbar>
</template>
 
<script>
import { useStore } from "vuex";
import { reactive, watch } from "vue";

export default {
   name: "MainAside",
   setup() {
      const store = useStore();

      // 当前页当前用户权限
      let currentPagePermissionStatusByCurrentUser = reactive({
         userManagementShow: false,
         roleManagementShow: false,
         permissionManagementShow: false,
         operationLogShow: false,
         originMapShow: false,
         studentDataInfoShow: false,
         collegeEnrollInfoShow: false,
         enrollProvinceInfoShow: false,
      });

      // 权限：
      // 1.用户列表操作
      // 2.用户权限分配
      watch(
         () => store.state.currentLoginUser.permissions,
         (newValue) => {
            if (newValue) {
               newValue.forEach((permission) => {
                  if (
                     permission.permissionPath ===
                     "/systemManagement/userManagement"
                  ) {
                     currentPagePermissionStatusByCurrentUser.userManagementShow = true;
                  }

                  if (
                     permission.permissionPath ===
                     "/systemManagement/roleManagement"
                  ) {
                     currentPagePermissionStatusByCurrentUser.roleManagementShow = true;
                  }

                  if (
                     permission.permissionPath ===
                     "/systemManagement/permissionManagement"
                  ) {
                     currentPagePermissionStatusByCurrentUser.permissionManagementShow = true;
                  }

                  if (
                     permission.permissionPath ===
                     "/systemManagement/operateLog"
                  ) {
                     currentPagePermissionStatusByCurrentUser.operationLogShow = true;
                  }

                  if (permission.permissionPath === "/originMap") {
                     currentPagePermissionStatusByCurrentUser.originMapShow = true;
                  }

                  if (permission.permissionPath === "/studentDataManagement") {
                     currentPagePermissionStatusByCurrentUser.studentDataInfoShow = true;
                  }

                  if (permission.permissionPath === "/collegeEnrollment") {
                     currentPagePermissionStatusByCurrentUser.collegeEnrollInfoShow = true;
                  }

                  if (permission.permissionPath === "/enrollmentProvince") {
                     currentPagePermissionStatusByCurrentUser.enrollProvinceInfoShow = true;
                  }
               });
            }
         },
         {
            immediate: true, // 立即监听
         }
      );

      return {
         currentPagePermissionStatusByCurrentUser,
      };
   },
};
</script>

<style scoped>
.aside_title {
   color: #fff;
   font-size: 16px;
   height: 60px;
   line-height: 60px;
   border-bottom: 0.1px solid #4b4e55;
}

.el_scrollbar {
   position: relative;
   height: 100%;
   background-color: #292e37;
}

.sub_menu_title {
   font-size: 14px;
}

.sub_menu_title:hover {
   color: #e58342;
}

.el-icon {
   font-size: 15px;
   color: #919398;
}
</style>
